<template>
    <div>
        <div class="userinfo" @click="setting">
            <div class="left">
                <div class="avatar">
                    <img :src="img_prefix_url + userInfo.imageUrl" alt="">
                    <!-- <van-image round width="1.2rem" height="1.2rem" :src="img_prefix_url + userInfo.imageUrl" /> -->

                </div>
                <div class="info">
                    <h2>{{ userInfo.name }}</h2>
                    <p>{{ userInfo.email }}</p>
                </div>
            </div>
            <div class="right">
                <div class="setting">
                    <van-icon name="setting-o"/>
                </div>
            </div>
        </div>
        <van-divider />
        <van-cell title="我的考试" @click="showExam" icon="records" isLink />
        <van-cell title="我的收藏" @click="showCollect" icon="like-o" isLink />
        <van-cell title="我的评论" @click="showComment" icon="like-o" isLink />

        <van-divider />
        <van-cell title="退出" @click="logout" icon="close" isLink />

    </div>
</template>

<script type="module">
import { img_prefix_url } from '../../config/site.js';

// mapState辅助函数：帮助我们生成计算属性，让你少按几次键
import { mapState } from 'vuex'

export default {
    name: "index",
    data() {
        return {
            img_prefix_url,
        }
    },
    created(){
        // 在created中获取用户信息
        // console.log(this.$store.state.userInfo);
    },
    computed: {
        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState(['userInfo']),
    },
    methods: {
        showComment() {
            this.$router.push('/show/mycomments');
        },
        showCollect() {
            this.$router.push('/show/mycollects');
        },
        showExam() {
            this.$router.push('/show/myexams');
        },
        logout() {
            localStorage.removeItem('token');
            this.$store.commit('logout');
            this.$router.push('/');
        },
        setting() {
            this.$router.push('/setting');
        }
    }
}
</script>

<style lang="less" scoped>
.userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.2rem;
    background-color: #fff;

    .left {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .avatar {
            width: 3.2rem;
            height: 3.2rem;
            margin-right: 0.8rem;
            margin-left: 0.8rem;
            border-radius: 50%;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .info {
            >h2 {
                font-weight: 700;
                margin-bottom: 0.2rem;
            }

            >p {
                color: #454545;
            }

        }

    }

    .right {

        .setting {
            font-size: 1.6rem;
            margin-right: 0.8rem;
        }

    }

    .van-cell {
        border-bottom: 2px solid #c6e2ff;
    }
}
</style>
